<template>
	<div>
		<n-modal
			v-model:show="showModal"
			class="custom-card"
			preset="card"
			style="width: 820px"
			title="Banner详情"
			size="huge"
			:bordered="false"
		>
			<div>
				<div v-if="detailInfoData.type === 2">
					<n-tabs type="line" :default-value="tabIndex" animated @update:value="handleUpdateValue">
						<n-tab-pane :name="1" tab="banner信息"></n-tab-pane>
						<n-tab-pane :name="2" tab="展示站点"></n-tab-pane>
					</n-tabs>
				</div>

				<div v-if="detailInfoData" class="detail">
					<div :style="{ display: tabIndex === 1 ? 'block' : 'none' }">
						<div class="detail-info">
							<div class="detail-info-left">
								<div class="detail-info-left-item">
									<p class="detail-info-left-item-label">编号</p>
									<p class="detail-info-left-item-value">{{ detailInfoData.bannerId }}</p>
								</div>
								<div class="detail-info-left-item">
									<p class="detail-info-left-item-label">类型</p>
									<p class="detail-info-left-item-value">
										{{ detailInfoData.type === 1 ? '产品' : '自定义' }}
									</p>
								</div>

								<div class="detail-info-left-item">
									<p class="detail-info-left-item-label">展示位置</p>
									<p class="detail-info-left-item-value">
										{{ detailInfoData.positionType === 1 ? '探店' : '素材圈' }}
									</p>
								</div>
								<div v-if="detailInfoData.type === 1" class="detail-info-left-item">
									<p class="detail-info-left-item-label">站点</p>
									<p class="detail-info-left-item-value">{{ detailInfoData.location || '-' }}</p>
								</div>
								<div v-if="detailInfoData.type === 1" class="detail-info-left-item">
									<p class="detail-info-left-item-label">产品名称</p>
									<p class="detail-info-left-item-value">{{ detailInfoData.productName || '-' }}</p>
								</div>

								<div v-if="detailInfoData.type === 1" class="detail-info-left-item"></div>
								<div class="detail-info-left-item">
									<p class="detail-info-left-item-label">上线时间</p>
									<p class="detail-info-left-item-value">{{ detailInfoData.startTime || '-' }}</p>
								</div>
								<div class="detail-info-left-item">
									<p class="detail-info-left-item-label">下线时间</p>
									<p class="detail-info-left-item-value">{{ detailInfoData.endTime || '-' }}</p>
								</div>
							</div>
							<div v-if="detailInfoData.type === 1" class="detail-info-right">
								<img :src="detailInfoData.codeImage" alt="" />
								<div class="detail-info-right-tip">请用微信扫描二维码进行预览</div>
							</div>
						</div>
						<!-- <div class="chart">
							<div ref="myRef" :style="{ width: '100%', height: '400px' }"></div>
						</div> -->
						<div class="banner">
							<div class="banner-box">
								<div class="banner-box-img">
									<p style="margin-bottom: 16px">Banner图片预览</p>
									<img :src="detailInfoData.content" alt="" />
								</div>
								<div v-if="detailInfoData.status === 1" class="banner-box-icon">
									<img src="~@/assets/images/addBanner/img_ad_zsc.png" alt="" />
								</div>
								<div class="banner-box-btn">
									<n-button v-if="detailInfoData.status !== 3" type="info" @click="replaceImg">
										替换图片
									</n-button>
									<p style="margin-top: 10px">历史修改次数：{{ detailInfoData.updateNum }}</p>
								</div>
							</div>
						</div>
					</div>
					<div
						v-if="detailInfoData.type === 2"
						:style="{ display: tabIndex === 2 ? 'block' : 'none' }"
					>
						<div class="locations">
							<div
								v-for="(item, index) in detailInfoData.locations"
								:key="index"
								class="locations-item"
							>
								<p>{{ item.province }}</p>
								<div class="locations-item-city">
									<n-grid cols="8">
										<n-gi v-for="location in item.locations" :key="location.id">
											{{ location.city }}
										</n-gi>
									</n-grid>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</n-modal>

		<n-modal
			v-model:show="uploadImgShow"
			class="custom-card"
			preset="card"
			style="width: 540px"
			title="更换图片"
			size="huge"
			:bordered="false"
		>
			<div class="upload">
				<p class="upload-title">请上传新的素材</p>
				<pictureCropper
					ref="pictureCropperRef"
					:width="presetMode.width"
					:height="presetMode.height"
					:type="2"
				></pictureCropper>
			</div>
			<template #footer>
				<div class="upload-footer">
					<n-button @click="clearImage">重新上传</n-button>
					<n-button
						style="margin-left: 6px"
						type="info"
						:disabled="uploading"
						:loading="uploading"
						@click="confirmBanner"
					>
						确认替换
					</n-button>
				</div>
			</template>
		</n-modal>
	</div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { useMessage } from 'naive-ui';
import { bannerDetail, tdBannerReplace } from '@/api/bannerMange';
import pictureCropper from './pictureCropper';
const pictureCropperRef = ref();
const presetMode = reactive({
	width: 0,
	height: 0
});

const uploading = ref(false);
const message = useMessage();
const Emits = defineEmits(['commit']);

const fileListD = ref([]); //展示图片
const showModal = ref(false);
const uploadImgShow = ref(false); //替换图片
const myRef = ref(null); // echarts
const tabIndex = ref(1); //当前选择tab
const detailInfoData = ref(null); //详情数据

const state = reactive({
	option: {
		title: [
			{
				text: '点击量与点击率',
				left: 0,
				textStyle: {
					fontSize: 16
				}
			},
			{
				text: '(每日数据)',
				top: 2,
				left: 120,
				textStyle: {
					fontSize: 12,
					color: '#999999'
				}
			}
		],

		tooltip: {
			trigger: 'axis',
			formatter: function (params) {
				return `${params[0].seriesName}:  ${params[0].value}万<br>
					   ${params[1].seriesName}:   ${params[1].value}%<br>
				`;
			},
			axisPointer: {
				type: 'cross',
				label: {
					fontSize: 12,
					color: '#fff',
					backgroundColor: '#000'
				}
			}
		},
		legend: {
			data: ['点击次数', '点击率']
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			top: 80,
			bottom: 80
		},
		dataZoom: [
			{
				type: 'slider',
				startValue: 4,
				zoomLock: true,
				// zoomOnMouseWheel: false,
				endValue: 10
			},
			{
				type: 'inside',
				zoomLock: true
			}
		],
		xAxis: [
			{
				type: 'category',
				data: [
					'03-11',
					'03-12',
					'03-13',
					'03-14',
					'03-15',
					'03-16',
					'03-17',
					'03-18',
					'03-19',
					'03-20',
					'03-21'
				]
			}
		],

		yAxis: [
			{
				name: '单位:次',
				type: 'value',
				nameTextStyle: {
					padding: [0, 0, 0, -25]
				}
			},
			{
				name: '单位:%',
				type: 'value',
				axisLabel: {
					formatter: '{value} %'
				},
				nameTextStyle: {
					padding: [0, 0, 0, 50]
				}
			}
		],
		series: [
			{
				name: '点击次数',
				type: 'bar',
				stack: '总量',
				areaStyle: {},
				barWidth: 24,
				itemStyle: {
					normal: {
						label: {
							formatter: '{c}' + '万',
							show: true, //开启显示
							position: 'top', //在上方显示
							textStyle: {
								//数值样式
								color: '#999',
								fontSize: 12
							}
						},
						color: '#DDDDFF' //以下为是否显示，显示位置和显示格式的设置了
					}
				},
				data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210]
			},
			{
				name: '点击率',
				type: 'line',
				axisLabel: {
					formatter: '{value} %'
				},
				symbolSize: 8,
				itemStyle: {
					normal: {
						color: '#9494D5' //以下为是否显示，显示位置和显示格式的设置了
					}
				},
				yAxisIndex: 1,
				data: [80, 40, 60, 100, 15, 33, 42.5, 100, 15, 33, 42.5]
			}
		]
	}
});
// 绘制折线图
const drawChart = () => {
	nextTick(() => {
		// 初始化echarts实例
		const Chart = echarts.init(myRef.value);
		Chart.setOption(state.option);
		window.addEventListener('resize', () => {
			//页面大小变化后Echarts也更改大小
			Chart.resize();
		});
	});
};
const replaceImg = () => {
	if (detailInfoData.value.positionType == 1) {
		presetMode.width = 750;
		presetMode.height = 522;
	} else {
		presetMode.width = 710;
		presetMode.height = 322;
	}
	uploadImgShow.value = true;
};

const clearImage = () => {
	// 清空上传图片
	pictureCropperRef.value.changeImageUrl = '';
	fileListD.value = [];
};
const handleUpdateValue = (val) => {
	tabIndex.value = val;
};
const init = (bannerId) => {
	if (bannerId) {
		bannerDetail({ bannerId }).then((res) => {
			console.log(res);
			if (res.code === 200) {
				detailInfoData.value = res.data;
				showModal.value = true;

				// if (detailInfoData.value.clickData) {
				// drawChart();
				// }
			} else {
				showModal.value = false;
			}
		});
	}
};

const confirmBanner = () => {
	if (!pictureCropperRef.value.changeImageUrl) {
		message.error('请先上传图片');
		return;
	}
	uploading.value = true;
	// 确认替图片
	let params = {
		content: pictureCropperRef.value.changeImageUrl,
		id: detailInfoData.value.bannerId
	};
	tdBannerReplace(params).then((res) => {
		if (res.code === 200) {
			message.success('替换成功');
			Emits('commit');
			fileListD.value = [];
			uploading.value = false;
			uploadImgShow.value = false;
			showModal.value = false;
			return;
		}
		uploading.value = false;
		message.error(res.message);
	});
};

defineExpose({ init });
</script>

<style lang="less" scoped>
.detail {
	max-height: 650px;
	padding: 10px;
	padding-bottom: 80px;
	overflow-y: auto;
	&-info {
		padding: 16px;
		background: #f5f5f5;
		border-radius: 10px;
		display: flex;
		margin-bottom: 20px;
		&-left {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			&-item {
				width: 30%;
				margin-bottom: 10px;
				&-label {
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				&-value {
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		&-right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			img {
				width: 100px;
				height: 100px;
				text-align: right;
			}
			&-tip {
				font-size: 12px;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.chart {
		// margin: 20px 0;
	}
	.banner {
		margin-top: 20px;
		&-box {
			display: flex;
			&-img {
				p {
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				img {
					width: 400px;
					height: 165px;
					border-radius: 11px;
				}
			}
			&-icon {
				width: 80px;
				height: 80px;
			}
			&-btn {
				margin-top: 80px;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
				p {
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
	.locations {
		&-item {
			margin: 20px 0;
			font-size: 18px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			&-city {
				margin: 16px 0;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
}
.upload {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	&-title {
		margin-bottom: 16px;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.upload-box {
		width: 376px;
		height: 140px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img {
			width: 36px;
			height: 36px;
		}
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.tips {
		margin-top: 10px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #f5894e;
	}
	&-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 50px;
	}
}
</style>
